<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		body{
			overflow: hidden;
		}
		.box{
			width: 768px;
			height: 768px;
			background: url('./images/fsw.png');
			margin: 30px auto 0;
			position: relative;
			animation: changeRotate 5s linear infinite;
		}
		.box > div{
			position: absolute;
			width: 130px;
			height: 170px;
			animation: changeRotate1 5s linear infinite;

		}
		.p1{
			background: url('./images/boy.png');
			left: 0;
			top: 30%;
		}
		.p2{
			background: url('./images/girl.png');
			right: 0;
			top: 30%;
		}
		.p3{
			background: url('./images/shamegirl.png');
			bottom: 0;
			left: 50%;
			margin-left: -65px;
		}
		@keyframes changeRotate{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
		@keyframes changeRotate1{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(-360deg);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="p1"></div>
		<div class="p2"></div>
		<div class="p3"></div>
	</div>
</body>
</html>